<template>
  <div class="container">
    <div class="sidebar">
      <device-select-tree
        @on-load="
          (defaultSelectKeyObj, selectedParentNodes) => {
            console.log('数据加载了一次')
            changeDeviceHandle('', selectedParentNodes, defaultSelectKeyObj)
          }
        "
        @on-change="changeDeviceHandle"
      >
        <!-- 书选项的卡片标题       -->
        <template #card-title> <IconList />&nbsp;分系统选项 </template>
        <!--一共两个slot 分别为title 和 extra       -->
        <!-- title 是树节点的标题
        注入了三个参数
        nodeData：当前节点数据
        switchNode：调用切换节点的函数，会影响value （必须调用此函数的实现，否则无法选择节点）
        value：当前选中的key
        selectedParentNodes：当前选中项的所有父节点
        -->
        <template #title="{ nodeData, switchNode, value }">
          <template v-if="nodeData.deviceId">
            <a-button
              @click="switchNode(nodeData.code, nodeData)"
              size="mini"
              :type="nodeData.code === value ? 'primary' : 'text'"
              >{{ nodeData.name }}
            </a-button>
          </template>
          <template v-else>
            <span class="text-gray-700">{{ nodeData.name }}</span>
          </template>
        </template>
        <!-- extra 是树节点的扩展选项，一般是每个节点尾部的按钮区域
        注入了三个参数
        nodeData：当前节点数据
        switchNode：调用切换节点的函数，会影响value
        value：当前选中的key
        selectedParentNodes：当前选中项的所有父节点
        -->
        <template #extra="{ nodeData, value, selectedParentNodes }">
          <template v-if="nodeData.deviceId">
            <a-tooltip content="设置告警规则">
              <a-button type="text" @click="openWarningSetting(nodeData, selectedParentNodes)">
                <IconSettings style="position: absolute; right: 8px; font-size: 12px; top: 10px; color: #3370ff" />
              </a-button>
            </a-tooltip>
          </template>
        </template>
      </device-select-tree>
    </div>
    <div class="main-content">
      <div class="settings">
        <a-tabs v-model:active-key="data.activeKey">
          <a-tab-pane key="threshold" title="多级门限">
            <Threshold
              v-if="data.activeKey === 'threshold'"
              :deviceId="data.deviceId"
              :paramsList="data.paramsList"
              :currentSatellite="data.satelliteObj"
            />
          </a-tab-pane>
          <a-tab-pane key="monitor" title="常值监测">
            <Monitor
              v-if="data.activeKey === 'monitor'"
              :deviceId="data.deviceId"
              :paramsList="data.paramsList"
              :currentSatellite="data.satelliteObj"
            />
          </a-tab-pane>
          <a-tab-pane key="analysis" title="关联分析">
            <Analysis
              v-if="data.activeKey === 'analysis'"
              :deviceId="data.deviceId"
              :paramsList="data.paramsList"
              :currentSatellite="data.satelliteObj"
            />
          </a-tab-pane>
          <a-tab-pane key="dataCompute" title="时序数据计算">
            <DataCompute
              v-if="data.activeKey === 'dataCompute'"
              :deviceId="data.deviceId"
              :paramsList="data.paramsList"
              :currentSatellite="data.satelliteObj"
            />
          </a-tab-pane>
          <a-tab-pane key="model" title="复杂模型">
            <Model
              v-if="data.activeKey === 'model'"
              :deviceId="data.deviceId"
              :paramsList="data.paramsList"
              :currentSatellite="data.satelliteObj"
            />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import Threshold from './bind/threshold.vue'
import Monitor from './bind/monitor.vue'
import Analysis from './bind/analyze.vue'
import DataCompute from './bind/dataCompute.vue'
import Model from './bind/model.vue'
import DeviceSelectTree from './components/deviceSelectTree.vue'
import { apiHome } from '@/api'

const data = reactive({
  treeData: [],
  deviceId: '',
  paramsList: [],
  activeKey: 'threshold', // 默认激活的tab
  expandedKeys: [], // 默认展开的树节点
  selectedKeys: [] // 默认选中的树节点
})

const getTreeData = async () => {
  const res = await apiHome.getStarStructInfo()
  if (res.code === 200) {
    data.treeData = res.data.map((item) => {
      return {
        title: item.name,
        key: item.code,
        children: item.deviceList.map((child) => {
          return {
            title: child.name,
            key: child.code,
            children: child.paramList.map((children) => {
              return {
                title: children.name,
                key: children.paramId
              }
            })
          }
        })
      }
    })
    data.expandedKeys = [data.treeData[0].key, data.treeData[0].children[0].key]
    data.selectedKeys = [data.treeData[0].children[0].children[0].key]
  }
}

const changeDeviceHandle = (deviceId, node, parentNodes) => {
  data.deviceId = node.deviceId
  console.log(deviceId)
  // console.log(node);
  // console.log(parentNodes);
  getParamsList()
  // data.deviceObj = node
  data.satelliteObj = findObjWithTwoline(parentNodes)
  // data.search.deviceId = deviceId
}

const findObjWithTwoline = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    const obj = arr[i]
    if (Object.prototype.hasOwnProperty.call(obj, 'satId')) {
      return obj
    }
    if (obj.children) {
      const result = findObjWithTwoline(obj.children)
      if (result) {
        return result
      }
    }
  }
  return null
}

const getParamsList = () => {
  apiHome.getParamListByDeviceId({ deviceId: data.deviceId }).then((res) => {
    if (res.code === 200) {
      data.paramsList = res.data
      // console.log(data.paramsList, 'data.paramsList');
    }
  })
}

onMounted(() => {
  // getTreeData();
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  min-height: calc(100vh - 56px);
}

.sidebar {
  width: 18%;
  padding: 20px;
  border-right: 1px solid #f0f0f0;
}
h2 {
  text-align: center;
  font-family:
    Microsoft YaHei,
    Microsoft YaHei,
    serif;
  font-weight: bold;
  font-size: 18px;
  color: #222222;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.settings {
  margin-bottom: 20px;
}
</style>
